import 'package:flutter/material.dart';
import 'package:icooker/model/reommend_data.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:kasax/kasax.dart';

/// 食品
class MeasList extends StatefulWidget {
  final List<Sancan> list;

  const MeasList(this.list, {Key? key}) : super(key: key);

  @override
  _MeasListState createState() => _MeasListState();
}

class _MeasListState extends State<MeasList>
    with SingleTickerProviderStateMixin {
  late TabController _mealsController;

  @override
  void initState() {
    _mealsController = TabController(
        length: widget.list!.length, vsync: this, initialIndex: 0);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 325,
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.only(bottom: 5),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/bar04.png'),
                    fit: BoxFit.cover)),
            child: TabBar(
              indicatorColor: Colors.amber,
              indicatorSize: TabBarIndicatorSize.label,
              labelColor: Colors.black,
              isScrollable: true,
              tabs: widget.list!
                  .map((e) => Tab(
                        text: e.title,
                      ))
                  .toList(),
              controller: _mealsController,
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: _mealsController,
              children: widget.list
                  .map((e) => Container(
                        child: GridView.builder(
                          physics: NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisSpacing: 2,
                                  crossAxisCount: 2,
                                  childAspectRatio: 1 / 2),
                          itemBuilder: (context, index) {
                            if (e == null ||
                                e.items == null ||
                                e.items!.isEmpty)
                              return Container(
                                child: Center(
                                  child: CircularProgressIndicator(),
                                ),
                              );
                            var item = e.items![index];
                            return GestureDetector(
                              onTap: () {
                                RouteUtils.pushNameWithArgs(
                                    context, '/details2', {'id': item.id,'title':item.title});
                              },
                              child: Container(
                                child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(
                                          10,
                                        ),
                                        child: CachedNetworkImage(
                                          imageUrl: item.img!,
                                          placeholder: (context, url) =>
                                              Container(
                                            width: 180,
                                            height: 230,
                                            color: Color(0xFFD6D6D6),
                                            child: Center(
                                              child: SizedBox(
                                                width: 30,
                                                height: 30,
                                                child:
                                                    CircularProgressIndicator(
                                                  color: Colors.blueGrey,
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                          child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            item.title!,
                                            style: TextStyle(
                                                fontSize: 14,
                                                color: Colors.black87),
                                          ),
                                          SizedBox(
                                            height: 5,
                                          ),
                                          Text(
                                            item.desc!,
                                            style: TextStyle(
                                                fontSize: 12,
                                                color: Colors.black54),
                                          ),
                                        ],
                                      ))
                                    ]),
                              ),
                            );
                          },
                          itemCount: e.items!.length,
                        ),
                      ))
                  .toList(),
            ),
          )
        ],
      ),
    );
  }

  Container buildTestContainer(Sancan e) {
    return Container(
      color: Colors.yellow,
      child: Text(e.title!),
    );
  }
}
